<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>子组件传值给父组件</title>
</head>

<body>
    <!-- 父组件 -->
    <div id="app">
        <h1>父组件的值是：{{parentmsg}}</h1>
        <h1>子组件传递给父组件的值是：{{msg}}</h1>
        <child @change="sonval"></child>
    </div>
    <!-- 子组件 -->
    <template id="sontem">
        <div>
            <h2>子组件的值是：{{sonmsg}}</h2>
            <button @click="sonfn">子传父</button>
        </div>
    </template>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                parentmsg: "PARENT",
                msg: ""
            }
        },
        methods: {
            sonval: function (val) {
                this.msg = val;
            }
        },
        components: {
            "child": {
                template: "#sontem",
                data() {
                    return {
                        sonmsg: "SON"
                    }
                },
                methods: {
                    sonfn: function () {
                        this.$emit("change", this.sonmsg);
                    }
                }
            }
        }
    })
</script>